<template>
  <view class="uni-wrap">
    <uni-row class="search-row">
      <uni-col :span="3">
        <view class="scan-box" @click="gotoAdd">
          <uni-icons type="plus" :size="28" color="#1677FF" />
        </view>
      </uni-col>
      <uni-col :span="21">
        <uni-search-bar
          class="search-box"
          radius="18"
          placeholder="单据号"
          clearButton="auto"
          cancelButton="none"
          v-model="searchValue"
          @input="input"
        />
      </uni-col>
    </uni-row>

    <view class="uni-list pt56">
      <view v-if="list.length == 0 && !!finishSearch">
        <view class="no-data-wrap">
          <image mode="aspectFit" src="/static/no_data.png" />
          <text>暂无数据</text>
        </view>
      </view>
      <view v-else>
        <view
          class="uni-list-cell"
          hover-class="uni-list-cell-hover"
          v-for="(item, index) in list"
          :key="index"
          :data-id="item.id"
          @click="openinfo(item.id)"
        >
          <view class="uni-media-list">
            <view class="uni-media-list-body">
              <view class="uni-media-list-text-top uni-ellipsis">
                单据编号：{{
                item.code || "-"
                }}
              </view>
              <view
                class="uni-media-list-text-bottom uni-ellipsis"
              >单据日期： {{ item.voucherDate || "-" }}</view>

              <view class="uni-media-list-text-bottom uni-ellipsis">业务类型： {{ "普通采购" }}</view>
              <view class="uni-media-list-text-bottom uni-ellipsis">
                同步状态：
                <uni-tag
                  :text="item.tplusSync == 1 ? '已同步' : '未同步' "
                  :type="item.tplusSync == 1 ? 'success' : ''"
                />
              </view>
            </view>
            <view style="display: flex;align-items: center;">
              <button @click.stop="tplusSync(item.id)" type="primary" v-if="item.tplusSync == 0">同步</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      size: 10,
      list: [],
      hasMore: true,
      searchValue: "",
      finishSearch: false
    };
  },
  onLoad() {
    this.getList();
  },
  onShow() {},
  methods: {
    getList() {
      uni.hideLoading();
      this.finishSearch = true;

      uni.showLoading({
        title: "加载中...."
      });
      let params = {
        pageNum: this.current,
        pageSize: this.size,
        code: this.searchValue || ""
      };
      this.$get("/warehouse/purchase/list", params).then(res => {
        if (res.rows.length < this.size) {
          this.hasMore = false;
        }
        this.current = this.current + 1;
        this.list = this.list.concat(res.rows);
        //不分页
        // this.list = res.data;
        uni.hideLoading();
        this.finishSearch = true;
      });
    },

    input(value) {
      let that = this;
      that.clearParams();
      clearTimeout(that.timer);
      that.timer = setTimeout(() => {
        that.getList();
      }, 500);
    },

    clearParams() {
      this.current = 1;
      this.size = 10;
      this.list = [];
      this.hasMore = true;
      this.finishSearch = false;
    },

    onPullDownRefresh() {
      this.clearParams();
      uni.showLoading({
        title: "刷新中...."
      });
      setTimeout(() => {
        this.getList();
        uni.hideLoading();
        uni.stopPullDownRefresh();
      }, 500);
    },

    openinfo(id) {
      uni.navigateTo({
        url: "/pages/purchasingManage/putIn/info?id=" + id,
        fail(error) {
          console.log(error);
        }
      });
    },

    gotoAdd() {
      uni.navigateTo({
        url: "/pages/purchasingManage/putIn/add",
        fail(error) {
          console.log(error);
        }
      });
    },
    tplusSync(id) {
      uni.showLoading({
        title: "同步中...."
      });
      this.$post("/warehouse/purchase/sync", { id }).then(res => {
        if (res.code == 200) {
          uni.hideLoading();
          uni.showModal({
            title: "同步成功",
            icon: "success"
          });
          this.clearParams();
          this.getList();
        } else {
          uni.hideLoading();
          uni.showToast({
            title: res.msg,
            icon: "none"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.search-row {
  display: flex;
  align-items: center;
  background-color: #fff;
  .scan-box {
    text-align: center;
  }
}
</style>
